<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息 - 校园助手</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 自定义Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#EC4899', // 主色调：粉色
                        secondary: '#F472B6', // 辅助色：浅粉色
                        accent: '#BE185D', // 强调色：深粉色
                        dark: '#1E293B', // 深色
                        light: '#FDF2F8'  // 浅色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    animation: {
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #EC4899 0%, #F472B6 100%);
            }
            .gradient-secondary {
                background: linear-gradient(135deg, #F472B6 0%, #FB7185 100%);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .glow {
                box-shadow: 0 0 15px rgba(236, 72, 153, 0.3);
            }
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <!-- 顶部导航栏 -->
    <nav class="bg-white shadow-md">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center space-x-6">
                    <div class="text-primary font-bold text-xl">
                        <i class="fa fa-code mr-2"></i>校园助手
                    </div>
                    <a href="/homepage.html" class="text-gray-600 hover:text-primary transition-custom">
                        <i class="fa fa-home mr-1"></i>
                        <span>用户中心</span>
                    </a>
                </div>
                <div class="flex items-center space-x-4">
                    <span id="current-username" class="text-gray-600 hidden md:block">用户：加载中...</span>
                    <button id="logout-button" class="px-3 py-2 rounded-md text-sm font-medium text-primary hover:text-white hover:bg-primary/10 transition-custom">
                        <i class="fa fa-sign-out mr-1"></i>退出登录
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
        <div class="bg-white shadow-lg rounded-xl overflow-hidden">
            <!-- 页面标题 -->
            <div class="bg-gradient-primary p-6 text-white">
                <h1 class="text-2xl font-bold">个人信息</h1>
                <p class="mt-1 text-white/80">查看和管理您的个人资料</p>
            </div>

            <!-- 个人信息内容 -->
            <div class="p-6">
                <div class="flex flex-col md:flex-row items-center mb-8">
                    <!-- 用户头像 -->
                    <div class="w-24 h-24 rounded-full bg-gray-200 flex items-center justify-center mb-4 md:mb-0 md:mr-6 overflow-hidden">
                        <i id="avatar-icon" class="fa fa-user-circle text-5xl text-gray-400"></i>
                    </div>
                    <!-- 用户基本信息 -->
                    <div>
                        <h2 id="user-full-name" class="text-xl font-semibold text-gray-800">加载中...</h2>
                        <p id="user-role" class="text-gray-600 mt-1">加载中...</p>
                        <div class="mt-2 flex items-center">
                            <span id="user-status" class="px-2 py-0.5 text-xs font-medium bg-gray-100 text-gray-800 rounded-full">离线</span>
                        </div>
                    </div>
                </div>

                <!-- 个人信息卡片 -->
                <div class="space-y-6">
                    <div class="bg-gray-50 p-5 rounded-lg border border-gray-100">
                        <h3 class="text-lg font-semibold text-gray-700 mb-4">账户信息</h3>
                        <div class="space-y-4">
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="md:col-span-1">
                                    <span class="text-sm text-gray-500">用户名</span>
                                </div>
                                <div class="md:col-span-2 font-medium" id="user-username">加载中...</div>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="md:col-span-1">
                                    <span class="text-sm text-gray-500">注册时间</span>
                                </div>
                                <div class="md:col-span-2 font-medium" id="user-register-time">加载中...</div>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="md:col-span-1">
                                    <span class="text-sm text-gray-500">最后登录时间</span>
                                </div>
                                <div class="md:col-span-2 font-medium" id="user-last-login">加载中...</div>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="md:col-span-1">
                                    <span class="text-sm text-gray-500">账户状态</span>
                                </div>
                                <div class="md:col-span-2 font-medium" id="user-account-status">加载中...</div>
                            </div>
                        </div>
                    </div>

                    <div class="bg-gray-50 p-5 rounded-lg border border-gray-100">
                        <h3 class="text-lg font-semibold text-gray-700 mb-4">统计信息</h3>
                        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                            <div class="bg-white p-4 rounded-lg shadow-sm text-center">
                                <div class="text-3xl font-bold text-primary" id="stats-activity">0</div>
                                <div class="text-sm text-gray-500 mt-1">活动次数</div>
                            </div>
                            <div class="bg-white p-4 rounded-lg shadow-sm text-center">
                                <div class="text-3xl font-bold text-primary" id="stats-login-count">0</div>
                                <div class="text-sm text-gray-500 mt-1">登录次数</div>
                            </div>
                            <div class="bg-white p-4 rounded-lg shadow-sm text-center">
                                <div class="text-3xl font-bold text-primary" id="stats-level">1</div>
                                <div class="text-sm text-gray-500 mt-1">用户等级</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="mt-8 flex flex-col sm:flex-row gap-4">
                    <button id="refresh-button" class="flex-1 px-4 py-3 bg-primary/10 text-primary font-medium rounded-lg hover:bg-primary/20 transition-custom flex items-center justify-center">
                        <i class="fa fa-refresh mr-2"></i>刷新信息
                    </button>
                    <button id="edit-button" class="flex-1 px-4 py-3 gradient-secondary text-white font-medium rounded-lg hover:opacity-90 transition-custom flex items-center justify-center shadow-md">
                        <i class="fa fa-pencil mr-2"></i>编辑资料
                    </button>
                </div>
            </div>
        </div>
    </main>

    <!-- 加载中模态框 -->
    <div id="loading-modal" class="fixed inset-0 flex items-center justify-center bg-black/50 z-50 hidden">
        <div class="bg-white rounded-xl p-6 max-w-md w-full flex flex-col items-center">
            <div class="w-16 h-16 border-4 border-primary/30 border-t-primary rounded-full animate-spin mb-4 glow"></div>
            <h3 class="text-lg font-semibold text-gray-800 mb-2">处理中</h3>
            <p class="text-gray-600 text-center" id="loading-message">正在处理您的请求，请稍候...</p>
        </div>
    </div>

    <!-- 错误提示模态框 -->
    <div id="error-modal" class="fixed inset-0 flex items-center justify-center bg-black/50 z-50 hidden">
        <div class="bg-white rounded-xl p-6 max-w-md w-full mx-4">
            <div class="flex items-center mb-4">
                <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-500 mr-3">
                    <i class="fa fa-exclamation-triangle text-red-600"></i>
                </div>
                <h3 class="text-lg font-semibold text-gray-800">错误</h3>
            </div>
            <p class="text-gray-600 mb-4" id="error-message">发生错误，请重试。</p>
            <div class="flex justify-end">
                <button id="close-error-modal" class="px-4 py-2 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition-custom border border-red-200">
                    关闭
                </button>
            </div>
        </div>
    </div>

    <!-- 成功提示模态框 -->
     <div id="success-modal" class="fixed inset-0 flex items-center justify-center bg-black/50 z-50 hidden">
         <div class="bg-white rounded-xl p-6 max-w-md w-full mx-4">
             <div class="flex items-center mb-4">
                 <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-500 mr-3">
                     <i class="fa fa-check text-green-600"></i>
                 </div>
                 <h3 class="text-lg font-semibold text-gray-800">成功</h3>
             </div>
             <p class="text-gray-600 mb-4" id="success-message">操作已成功完成。</p>
             <div class="flex justify-end">
                 <button id="close-success-modal" class="px-4 py-2 bg-green-50 text-green-600 rounded-lg hover:bg-green-100 transition-custom border border-green-200">
                     关闭
                 </button>
             </div>
         </div>
     </div>

    <script>
        // DOM 元素引用
        const currentUsername = document.getElementById('current-username');
        const logoutButton = document.getElementById('logout-button');
        const refreshButton = document.getElementById('refresh-button');
        const editButton = document.getElementById('edit-button');
        const userFullName = document.getElementById('user-full-name');
        const userRole = document.getElementById('user-role');
        const userUsername = document.getElementById('user-username');
        const userRegisterTime = document.getElementById('user-register-time');
        const userLastLogin = document.getElementById('user-last-login');
        const userAccountStatus = document.getElementById('user-account-status');
        const userStatus = document.getElementById('user-status');
        const statsActivity = document.getElementById('stats-activity');
        const statsLoginCount = document.getElementById('stats-login-count');
        const statsLevel = document.getElementById('stats-level');
        
        const loadingModal = document.getElementById('loading-modal');
        const loadingMessage = document.getElementById('loading-message');
        const errorModal = document.getElementById('error-modal');
        const errorMessage = document.getElementById('error-message');
        const closeErrorModal = document.getElementById('close-error-modal');
        const successModal = document.getElementById('success-modal');
        const successMessage = document.getElementById('success-message');
        const closeSuccessModal = document.getElementById('close-success-modal');

        // 工具函数
        function showLoading(message) {
            loadingMessage.textContent = message;
            loadingModal.classList.remove('hidden');
        }

        function hideLoading() {
            loadingModal.classList.add('hidden');
        }

        function showErrorMessage(message) {
            errorMessage.textContent = message;
            errorModal.classList.remove('hidden');
        }

        function showSuccessMessage(message) {
            successMessage.textContent = message;
            successModal.classList.remove('hidden');
            
            // 2秒后自动关闭成功提示
            setTimeout(function() {
                successModal.classList.add('hidden');
            }, 2000);
        }

        // 检查用户是否已登录
        function checkLoginStatus() {
            const token = localStorage.getItem('token');
            const username = localStorage.getItem('username');
            
            if (!token || !username) {
                showErrorMessage('请先登录');
                setTimeout(() => {
                    window.location.href = '/login.html';
                }, 1500);
                return false;
            }
            
            currentUsername.textContent = `用户：${username}`;
            return true;
        }

        // 获取用户信息
        function fetchUserInfo() {
            if (!checkLoginStatus()) return;
            
            showLoading('正在获取用户信息...');
            
            const token = localStorage.getItem('token');
            
            // 尝试调用真实API
            fetch('/api/user/profile', {
                method: 'GET',
                headers: {
                    'Authorization': `Bearer ${token}`,
                    'Accept': 'application/json'
                }
            })
            .then(response => {
                if (!response.ok) {
                    // 如果API调用失败，使用模拟数据
                    console.log('使用模拟用户数据');
                    return getMockUserInfo();
                }
                return response.json();
            })
            .then(data => {
                hideLoading();
                displayUserInfo(data);
            })
            .catch(error => {
                hideLoading();
                console.error('获取用户信息失败，使用模拟数据:', error);
                // 使用模拟数据
                const mockData = getMockUserInfo();
                displayUserInfo(mockData);
            });
        }

        // 模拟用户信息
        function getMockUserInfo() {
            const username = localStorage.getItem('username') || 'user';
            const now = new Date();
            const registerTime = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000); // 30天前注册
            
            return {
                username: username,
                fullName: username === 'admin' ? '管理员' : '普通用户',
                role: username === 'admin' ? '管理员' : '普通用户',
                registerTime: registerTime.toLocaleString('zh-CN'),
                lastLogin: now.toLocaleString('zh-CN'),
                accountStatus: '正常',
                isOnline: true,
                stats: {
                    activityCount: Math.floor(Math.random() * 100) + 10,
                    loginCount: Math.floor(Math.random() * 50) + 5,
                    level: Math.floor(Math.random() * 5) + 1
                }
            };
        }

        // 显示用户信息
        function displayUserInfo(userInfo) {
            // 设置用户基本信息
            userFullName.textContent = userInfo.fullName || userInfo.username;
            userRole.textContent = userInfo.role || '普通用户';
            userUsername.textContent = userInfo.username;
            userRegisterTime.textContent = userInfo.registerTime || '未知';
            userLastLogin.textContent = userInfo.lastLogin || '未知';
            userAccountStatus.textContent = userInfo.accountStatus || '正常';
            
            // 设置在线状态
            if (userInfo.isOnline) {
                userStatus.textContent = '在线';
                userStatus.classList.remove('bg-gray-100', 'text-gray-800');
                userStatus.classList.add('bg-green-100', 'text-green-800');
            }
            
            // 设置统计信息
            if (userInfo.stats) {
                statsActivity.textContent = userInfo.stats.activityCount || 0;
                statsLoginCount.textContent = userInfo.stats.loginCount || 0;
                statsLevel.textContent = userInfo.stats.level || 1;
            }
        }

        // 退出登录
        function handleLogout() {
            localStorage.removeItem('token');
            localStorage.removeItem('username');
            showSuccessMessage('已退出登录');
            setTimeout(() => {
                window.location.href = '/login.html';
            }, 1500);
        }

        // 刷新用户信息
        function handleRefresh() {
            fetchUserInfo();
        }

        // 编辑资料（待实现）
        function handleEdit() {
            showSuccessMessage('编辑资料功能开发中');
        }

        // 初始化事件监听
        function initEventListeners() {
            logoutButton.addEventListener('click', handleLogout);
            refreshButton.addEventListener('click', handleRefresh);
            editButton.addEventListener('click', handleEdit);
            closeErrorModal.addEventListener('click', () => errorModal.classList.add('hidden'));
            closeSuccessModal.addEventListener('click', () => successModal.classList.add('hidden'));
            
            // 点击模态框外部关闭模态框
            errorModal.addEventListener('click', function(event) {
                if (event.target === errorModal) {
                    errorModal.classList.add('hidden');
                }
            });
            
            successModal.addEventListener('click', function(event) {
                if (event.target === successModal) {
                    successModal.classList.add('hidden');
                }
            });
        }

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            initEventListeners();
            fetchUserInfo();
        });
    </script>
</body>
</html>